<template>
  <div class="hello">
    <div class="wyyx">
		<!-- 头部 -->
		<div class="header">
			<div class="nav-binner">
				<div class="imgWrap">
					<van-image :src="imgWrap" />
				</div>
			</div>
			<div class="nav">
				<div class="line">
					<a href="#" class="logo"></a>
					<div class="search">
						<van-search  value="请输入搜索关键词" input-align="center"/>
					</div>
					<div class="log-in">登录</div>
				</div>
			</div>
			<div class="tab">
				<div class="tab-t">
					<van-tabs>
						<van-tab v-for="(item,index) in arr" :title="item" :key="index">
							
						</van-tab>
					</van-tabs>
				</div>
				<div class="tab-icon">
					<span></span>
				</div>
			</div>
		</div>
		<!-- 轮播 -->
		<div class="banner">
			<van-swipe :autoplay="3000">
				<van-swipe-item v-for="(image, index) in images" :key="index">
					<img v-lazy="image"/>
				</van-swipe-item>
			</van-swipe>
		</div>
		<div class="serve">
			<a href="#" class="item">
				<i></i>
				<span>网易自营品牌</span>
			</a>
			<a href="#" class="item">
				<i></i>
				<span>30天无忧退货</span>
			</a>
			<a href="#" class="item">
				<i></i>
				<span>48小时快速退款</span>
			</a>
		</div>
		<!-- 菜单 -->
		<div class="menu">
			<van-grid :column-num="5" :border="false" icon-size="1.46rem">
				<van-grid-item v-for="item in value" :key="item.id" :text="item.text" :icon="item.src" class="menu-icon"/>
			</van-grid>
		</div>
		<!-- 广告 -->
		<div class="banner-img">
			<div class="img-top">
				<a href="#"></a>
			</div>
			<div class="img-bot">
				<a href="#"></a>
			</div>
		</div>
		
		<div class="page-content">
			<!-- 新人专享礼 -->
			<div class="page1">
				<div class="page1-content">
					<div class="page1-title">
						<span>新人专享礼</span>
					</div>
					<div class="page1-img">
						<div class="img-left">
							<p>新人专享礼包</p>
							<div class="img1">
								<van-image :src="img1" />
							</div>
						</div>
						<div class="img-right">
							<div class="module1">
								<div class="mod1-cot">
									<div class="module1-img">
										<div class="img2">
											<van-image :src="img2" />
										</div>
										<div class="discount">
											<p>¥24.5</p>
											<p>¥29.9</p>
										</div>
									</div>
									<div class="module1-txt">
										<p>福利社</p>
										<p>今日特价</p>
									</div>
								</div>
							</div>
							<div class="module2">
								<div class="mod2-cot">
									<div class="module2-img">
										<div class="img3">
											<van-image :src="img3" />
										</div>
										<div class="discount">
											<p>¥129</p>
											<p>¥199</p>
										</div>
									</div>
									<div class="module2-txt">
										<p>新人拼团</p>
										<div>1元起包邮</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 类目热销榜 -->
			<div class="page2">
				<div class="page2-content">
					<div class="title">
						<span>类目热销榜</span>
					</div>
					<div class="page2-menu">
						<div class="page2-module1">
							<div class="page2-left">
								<div class="page2-text">
									<span>热销榜</span>
								</div>
								<div class="page2-img">
									<van-image :src="page2Img" />
								</div>
							</div>
							<div class="page2-right">
								<div class="page2-text">
									<span>好评榜</span>
								</div>
								<div class="page2-img1">
									<van-image :src="page2Img1" />
								</div>
							</div>
						</div>
						<div class="page2-module2">
							<van-grid :column-num="4" :border="false" icon-size="1.46rem" gutter="5" class="page2-pd">
								<van-grid-item v-for="item in menu" :key="item.id" class="page2-bg">
									<p class="page2-p">{{item.text}}</p>
									<van-image :src="item.src" />
								</van-grid-item>
							</van-grid>
						</div>
					</div>
					
				</div>
			</div>
			<!-- 限时购 -->
			<div class="page3">
				<div class="page3-content">
					<div class="title">
						<span>限时购</span>
						<div class="countdown">
							<van-count-down :time="time">
								<template #default="timeData">
									<span class="block">{{ timeData.hours }}</span>
									<span class="colon">:</span>
									<span class="block">{{ timeData.minutes }}</span>
									<span class="colon">:</span>
									<span class="block">{{ timeData.seconds }}</span>
								</template>
							</van-count-down>
						</div>
						<a href="#" class="page3-a">
							更多
							<i></i>
						</a>
					</div>
					<div class="page3-menu">
						<van-grid :column-num="3" :border="false">
							<van-grid-item v-for="item in menu2" :key="item.id" class="page3-bg">
								<van-image :src="item.src" class="bg"/>
								<p class="page3-p1">{{item.text}}
									<span class="page3-span1">{{item.text2}}</span>
								</p>
							</van-grid-item>
						</van-grid>
					</div>
				</div>
			</div>
			<!-- 新品首发 -->
			<div class="page4">
				<div class="page4-content">
					<div class="title">
						<span>新品首发</span>
						<a href="#" class="page4-a">
							更多
							<i></i>
						</a>
					</div>
					<div class="page4-menu">
						<van-grid :column-num="3" :border="false">
							<van-grid-item v-for="item in menu3" :key="item.id" class="page4-bg">
								<van-image :src="item.src" class="bg"/>
								<p class="page4-p1">{{item.text}}</p>
								<span class="page4-span1">{{item.text2}}</span>
							</van-grid-item>
						</van-grid>
					</div>
				</div>
			</div>
			<!-- 超值专区 -->
			<div class="page5">
				<div class="page5-content">
					<div class="page5-left">
						<div class="page5-text">
							<p>超值专区</p>
							<p>低至9.9元</p>
						</div>
						<div class="page5-img">
							<van-image :src="page5Img"/>
							<van-image :src="page5Img1"/>
						</div>
					</div>
					<div class="page5-right">
						<div class="page5-text">
							<p>员工精选</p>
							<p>天天内部价</p>
						</div>
						<div class="page5-img">
							<van-image :src="page5Img2"/>
							<van-image :src="page5Img3"/>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="footer">
			<div class="footer-content">
				<div class="footer-btn">
					<a href="#">下载APP</a>
					<a href="#">电脑版</a>
				</div>
				<p class="footer-p">
					网易公司版权所有 © 1997-2020
					<br>
					食品经营许可证：JY13301080111719
				</p>
			</div>
		</div>
		<div class="footer-nav">
			<van-tabbar v-model="active">
				<van-tabbar-item icon="wap-home-o" class="footer-icon" color="#dd1a21">首页</van-tabbar-item>
				<van-tabbar-item icon="points">分类</van-tabbar-item>
				<van-tabbar-item icon="goods-collect-o" dot>值得买</van-tabbar-item>
				<van-tabbar-item icon="shopping-cart-o">购物车</van-tabbar-item>
				<van-tabbar-item icon="contact">个人</van-tabbar-item>
			</van-tabbar>
		</div>
	</div>
  </div>
    
</template>

<script>

import { Lazyload } from 'vant';
import Vue from 'vue';
Vue.use(Lazyload);

export default {
  name: 'wyyx',
  props: {
    msg: String
  },
  data(){
	return{
		arr:['推荐','居家服务','服饰鞋包','美食酒水','个护清洁','母婴亲子','运动旅游','数码家电','严选全球'],
		images:[
			require('../assets/img/13.webp'),
			require('../assets/img/14.webp'),
			require('../assets/img/16.webp'),
			require('../assets/img/28.webp'),
			require('../assets/img/29.webp'),
			require('../assets/img/30.webp'),
			require('../assets/img/43.webp'),
		],
		value:[
			{src:require('../assets/img/33.png'),text:'新品首发'},
			{src:require('../assets/img/47.png'),text:'居家生活'},
			{src:require('../assets/img/20.png'),text:'服饰鞋包'},
			{src:require('../assets/img/22.png'),text:'美食酒水'},
			{src:require('../assets/img/07.png'),text:'个护酒水'},
			{src:require('../assets/img/19.png'),text:'母婴亲子'},
			{src:require('../assets/img/06.png'),text:'运动旅行'},
			{src:require('../assets/img/46.png'),text:'数码电器'},
			{src:require('../assets/img/45.png'),text:'全球特色'},
			{src:require('../assets/img/09.gif'),text:'好货抄底'},
		],
		menu:[
			{src:require('../assets/img/d5.webp'),text:'美食酒水榜'},
			{src:require('../assets/img/17.webp'),text:'服饰鞋包榜'},
			{src:require('../assets/img/d2.webp'),text:'居家生活榜'},
			{src:require('../assets/img/d3.webp'),text:'数码家电榜'},
			{src:require('../assets/img/d4.webp'),text:'个护清洁榜'},
			{src:require('../assets/img/12.webp'),text:'严选全球榜'},
			{src:require('../assets/img/d6.webp'),text:'母婴亲子榜'},
			{src:require('../assets/img/48.webp'),text:'运动旅行榜'},
		],
		menu2:[
			{src:require('../assets/img/do1.webp'),text:'¥68',text2:'¥68'},
			{src:require('../assets/img/do2.webp'),text:'¥178',text2:'¥198'},
			{src:require('../assets/img/do3.webp'),text:'¥32',text2:'¥54'},
			{src:require('../assets/img/do4.webp'),text:'¥78',text2:'¥128'},
			{src:require('../assets/img/do5.webp'),text:'¥156',text2:'¥218'},
			{src:require('../assets/img/do6.webp'),text:'¥245',text2:'¥356'},
		],
		menu3:[
			{src:require('../assets/img/32.webp'),text:'2020新果上市，南非碧根果仁 150克',text2:'¥46'},
			{src:require('../assets/img/01.webp'),text:'奶香浓郁四层夹心 俄罗斯冰淇淋威化饼干',text2:'¥29.9'},
			{src:require('../assets/img/23.webp'),text:'2020新果上市，临安山核桃仁 150克',text2:'¥56.8'},
			{src:require('../assets/img/41.webp'),text:'全方位防漏经期神器 柔肌感经期裤 3片/包',text2:'¥12.9'},
			{src:require('../assets/img/21.webp'),text:'镜片/玻璃防起雾 一次性擦拭清洁防雾湿巾',text2:'¥19.9'},
			{src:require('../assets/img/do7.webp'),text:'清洁养护一片搞定 皮革护理湿巾',text2:'¥9.9'},
		],
		active: 0,
		icon: {
			active: 'wap-home-o',
			inactive: 'wap-home-o',
		},
		time: 30 * 60 * 60 * 1000,
		img3:require('../assets/img/49.webp'),
		img2:require('../assets/img/d1.webp'),
		img1:require('../assets/img/18.png'),
		page2Img1:require('../assets/img/26.webp'),
		page2Img:require('../assets/img/35.webp'),
		imgWrap:require('../assets/img/05.webp'),
		page5Img:require('../assets/img/dow1.webp'),
		page5Img1:require('../assets/img/dow2.webp'),
		page5Img2:require('../assets/img/dow3.webp'),
		page5Img3:require('../assets/img/dow4.webp'),
	}
  }
}
</script>

<style scoped>
  .hello{
	overflow: hidden;
  }
	/* 头部 */
   .header{
	position: fixed;
	z-index: 999;
   }
  .imgWrap,.imgWrap img{
	width: 100%;
	height: 100%;
  }
  .nav{
	background-color: #fff;
	border-bottom: 1px solid #d9d9d9;
	margin-top: -.053304rem;
  }
  .line{
	display: flex;
	flex-flow: nowrap;
	align-items: center;
	background-color: #fff;
	padding: .28rem .63rem;
  }
  .logo{
	background: url(../assets/img/51.png) -.06rem -.08rem;
	vertical-align: middle;
	width: 2.03rem;
	height: .45rem;
	background-size: 2.899rem auto;
	display: inline-block;
	margin-right: .26667rem;
  }
  .van-search{
	padding: 0;
	border-radius: 8px;
  }
  .search{
	width: 5.56rem;
  }
  .log-in{
	width: .95rem;
	height: .54rem;
	border: 1px solid #dd1a21;
	border-radius: 3px;
	margin-left: 0.23rem;
	text-align: center;
	line-height: .54rem;
	color: #dd1a21;
  }
  .tab{
	overflow: hidden;
  }
  .tab-t{
	width: 8.3rem;
	float: left;
  }
  .tab-icon{
	width: 1.70rem;
	height: 1.17rem;
	float: left;
	background-color: #fff;
  }
  .tab-icon span{
	display: block;
	width: .56rem;
	height: .56rem;
	background: url(../assets/img/49.png) -.65rem 0;
	background-size: 1.65rem auto;
	margin: .29rem auto;
  }
  /* 轮播 */
  .banner{
	padding-top: 4.157782rem;
  }
  .banner,.banner img{
	width: 100%;
	height: 100%;
  }
  .serve{
	width: 100%;
	height: .9168rem;
	display: flex;
	flex-flow: nowrap;
	align-items: center;
	justify-content: space-around;
	background-color: #fff;
  }
  .item i{
	display: inline-block;
	width: .4071rem;
	height: .4071rem;
	margin-right: .1rem;
	vertical-align: bottom;
  }
  .item span{
	display: inline-block;
	height: .4071rem;
	line-height: .4071rem;
	color: #333;
  }
  .item:first-child i{
	background: url(../assets/img/27.png) 50%;
	background-size: 100% 100%;
  }
  .item:nth-child(2) i{
	background: url(../assets/img/04.png) 50%;
	background-size: 100% 100%;
  }
  .item:nth-child(3) i{
	background: url(../assets/img/42.png) 50%;
	background-size: 100% 100%;
  }
  /* 广告 */
  .banner-img{
	background-color: #eee;
  }
  .img-top{
	height: 4.0924rem;
  }
  .img-top a{
	display: block;
	width: 100%;
	height: 100%;
	background: url("https://yanxuan.nosdn.127.net/c267451e10bc75f513770f14f1232ddc.gif?imageView&quality=75") no-repeat 50%;
	background-size: 100% 100%;
  }
  .img-bot{
	height: 1.188699rem;
	padding: 0.133262rem;
  }
  .img-bot a{
	display: block;
	width: 100%;
	height: 100%;
	background: url("https://yanxuan.nosdn.127.net/f70470cfb6ddd97fe66d97b1655d502a.png?quality=75&type=webp&imageView&thumbnail=750x0") no-repeat 50%;
	background-size: 100% 100%;
  }
  .page-content{
	background-color: #eee;
  }
  /* 新人专享礼 */
  .page1{
	background-color: #fff;
  }
  .page1-content{
	margin: 0.2666rem 0;
	padding-bottom: .4rem;
  }
  .page1-title{
	height: 1.1997rem;
	width: 100%;
	line-height: 1.1997rem;
	font-size: .44rem;
	text-align: center;
  }
  .page1-title span{
	display: inline-block;
	position: relative;
  }
  .page1-title span::before{
	content: "";
	position: absolute;
	left: -.53333rem;
	top: .6rem;
	width: .32rem;
	height: .04rem;
	background: #333;
  }
  .page1-title span::after{
	content: "";
	position: absolute;
	right: -.53333rem;
	top: .6rem;
	width: .32rem;
	height: .04rem;
	background: #333;
  }
  .page1-img{
	padding-left: .4rem;
	overflow: hidden;
  }
  .img-left{
	display: block;
	width: 4.57333rem;
	height: 5.78667rem;
	background: #f9e9cf;
	border-radius: .05333rem;
	margin-right: .05333rem;
	float: left;
	color: #333;
  }
  .img-left p{
	font-size: .42667rem;
	padding: .4rem 0 0 .4rem;
  }
  .img1{
	margin: .49333rem auto;
	width: 3.44rem;
	height: 3.42667rem;
	position: relative;
  }
  .img1 img{
	width: 100%;
	height: 100%;
  }
  .img-right{
	overflow: hidden;
  }
  .module1{
	background: #fbe2d3;
	border-radius: 4px;
	width: 4.57333rem;
	height: 2.86667rem;
	margin-bottom: .05333rem;
	float: left;
  }
  .mod1-cot,.mod2-cot{
	height: 2.9rem;
	width: 4.6rem;
	box-sizing: border-box;
	position: relative;
	display: block;
	color: #333;
	float: left;
	border-radius: .05333rem;
	margin: 0 .05333rem .05333rem 0;
	font-size: .32rem;
	padding: .26667rem 0 0 .4rem;
  }
  .module1-img,.module2-img{
	position: absolute;
	top: .2rem;
	right: 0;
	width: 2.7rem;
	height: 2.7rem;
  }
  .img2,.img3{
	width: 2.7rem;
	height: 2.7rem;
  }
  .img2 img,.img3 img{
	width: 100%;
	height: auto;
  }
  .discount{
	position: absolute;
    top: 0;
    right: .4rem;
    width: 1.15rem;
    height: 1.15rem;
    opacity: .8;
    background: #f59524;
    border-radius: 50%;
    color: #fff;
    text-align: center;
  }
  .discount p:first-child{
	font-size: .35rem;
	margin-top: .25rem;
  }
  .discount p:nth-child(2){
	font-size: .35rem;
    margin-top: -.1.5rem;
    text-decoration: line-through;
  }
  .module1-txt p:first-child,.module2-txt p:first-child{
	font-size: .42667rem;
	width: 4rem;
	text-align: left;
  }
  .module1-txt p:nth-child(2){
	color: #7f7f7f;
	text-align: left;
	margin-top: .15rem;
  }
  .module2{
	background: #ffecc2;
	border-radius: 4px;
	width: 4.57333rem;
	height: 2.86667rem;
	margin-bottom: .05333rem;
	float: left;
  }
  .module2-txt p:first-child{
	margin-bottom: .1066rem;
  }
  .module2-txt div:nth-child(2){
    display: inline;
    padding: 0 .13333rem;
    height: .42667rem;
    background: #cbb693;
    border-radius: .05333rem;
    color: #fff;
    font-size: .29333rem;
    line-height: .42667rem;
	margin-left: -2.5rem;
  }
  /* 类目销售榜 */
  .page2-content{
	margin-bottom: .2666rem;
	background-color: #fff;
  }
  .title{
	width: 100%;
    height: 1.3rem;
    line-height: 1.3rem;
    padding-left: .4rem;
    background: #fff;
  }
  .title span{
	float: left;
    font-size: .42667rem;
  }
  .page2-menu{
	padding: 0 .26667rem .26667rem .4rem;
  }
  .page2-left,.page2-right{
	width: 4.53333rem;
	height: 2.66667rem;
	float: left;
	border-radius: .05333rem;
	margin: 0 .13333rem .13333rem 0;
	position: relative;
  }
  .page2-left{
	background-color: #f9f3e4;
  }
  .page2-text{
	position: relative;
    padding-left: .32rem;
    color: #333;
    font-family: PingFangSC-Medium;
    font-size: .37333rem;
    margin-top: .88rem;
    z-index: 5;
	text-align: left;
  }
  .page2-text span{
	display: inline-block;
    position: relative;
  }
  .page2-text span::before{
	content: "";
    position: absolute;
    left: 0;
    bottom: -.21333rem;
    width: .64rem;
    height: .05333rem;
    background: #333;
	box-sizing: border-box;
  }
  .page2-img,.page2-img1{
	position: absolute;
    right: 0;
    top: 0;
    width: 2.66667rem;
    height: 2.66667rem;
  }
  .page2-img img,.page2-img1 img{
	width: 100%;
    height: auto;
  }
  .page2-right{
	background: #ebeff6;
  }
  .page2-module1{
	overflow: hidden;
  }
  .page2-pd{
	padding-left: 0 !important;
  }
  .page2-bg>>>.van-grid-item__content{
	background-color: #f5f5f5;
	border-radius: .03rem;
	padding: .1865rem .2132rem;
  }
  .menu-icon>>>.van-grid-item__content {
	padding: .0799rem .1332rem;
  }
  .page2-p{
	margin-top: 5px;
	color: #000;
  }
  /* 限时购 */
  .page3-content,.page4-content{
	background-color: #fff;
	margin-bottom: .2666rem;
  }
  .page3-a{
	display: inline-block;
    font-size: .4rem;
    color: #333;
	float: left;
	margin-left: 4.1044rem;
  }
  .page3-a i,.page4-a i{
	display: inline-block;
	width: .2rem;
	height: .38rem;
	vertical-align: middle;
	line-height: .6130rem;
	background: url(../assets/img/52.png) -4rem -3.36rem;
	background-size: 5.0133rem 5.0133rem;
  }
  .countdown{
	overflow: hidden;
	display: inline-block;
	float: left;
	margin: .3997rem 0 0 .3199rem;
  }
  .colon {
	display: inline-block;
	margin: 0 .0799rem;
  }
  .block {
	display: inline-block;
	width: 22px;
	color: #fff;
	font-size: .3731rem !important;
	text-align: center;
	background-color: #333;
	border-radius: .0533rem;
  }
  .bg{
	background: #f5f5f5;
  }
  .page3-p1{
	font-size: .3733rem;
    color: #dd1a21;
    margin-right: .16rem;
	margin-top: .16rem;
  }
  .page3-span1{
	font-size: .32rem;
    color: #7f7f7f;
    text-decoration: line-through;
  }
  .page3-bg>>>.van-grid-item__content{
	padding: 0.0533rem 0.2132rem 0.2132rem 0.2665rem;
  }
  /* 新品首发 */
  .page4-content{
	padding-bottom: .133262rem;
  }
  .page4-a{
	display: inline-block;
	font-size: .4rem;
	color: #333;
	float: left;
	margin-left: 6.3699rem;
  }
  .page4-p1{
    font-size: .32rem;
    line-height: .48rem;
	color: #333;
  }
  .page4-span1{
	display: inline-block;
	width: 100px;
	font-size: .4266rem;
    line-height: .64rem;
    color: #dd1a21;
  }
  .page4-bg>>>.van-grid-item__content{
	padding: 0 5px 10px 5px;
  }
  /* 超值专区 */
  .page5-content{
	overflow: hidden;
    padding: .1333rem .4rem .4rem .3466rem;
    background: #fff;
    margin-bottom: .26667rem;
  }
  .page5-left,.page5-right{
	width: 4.2910rem;
    height: 3.2rem;
	background-color: #f5f5f5;
    float: left;
    margin: .0533rem 0 0 .0533rem;
    padding: .2666rem 0 0 .2666rem;
    border-radius: .05333rem;
  }
  .page5-text p:nth-child(1){
	padding-left: .1333rem;
    font-size: .4266rem;
	color: #000;
	margin-bottom: 0.1599rem;
  }
  .page5-text p:nth-child(2){
	padding-left: .1333rem;
    font-size: .32rem;
	color: #666;
  }
  .page5-img{
	width: 100%;
	margin-top: 0.18rem;
  }
  .page5-img>>>.van-image img{
	width: 2rem;
    height: 2rem;
    float: left;
    margin-right: .0533rem;
  }
  /* 页脚 */
  .footer{
	background-color: #414141;
	margin-bottom: 1.359275rem;
	padding-top: .26667rem;
  }
  .footer-content{
	padding: .72rem .26667rem .37333rem;
	text-align: center;
  }
  .footer-btn{
	margin-bottom: .48rem;
  }
  .footer-btn a{
	display: inline-block;
	width: 2.29333rem;
	height: .82667rem;
    font-size: .32rem;
    color: #fff;
    line-height: .82667rem;
	border: 1px solid #999;
  }
  .footer-btn a:first-child{
	margin-right: .66667rem;
  }
  .footer-p{
	font-size: .32rem;
    line-height: .42667rem;
    color: #999;
  }
</style>
